<template>
  <div class="app-container home">
    <!-- 顶部数据概览 -->
    <el-row :gutter="20" class="overview-row">
      <el-col :span="6">
        <el-card shadow="hover" class="overview-card">
          <div class="card-title">总用户数</div>
          <div class="card-number">128,520</div>
          <div class="card-footer">
            <span>今日新增: +156</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="overview-card">
          <div class="card-title">订单总量</div>
          <div class="card-number">25,689</div>
          <div class="card-footer">
            <span>待支付: 126</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="overview-card">
          <div class="card-title">今日销售额</div>
          <div class="card-number">￥168,390</div>
          <div class="card-footer">
            <span>较昨日: +12.5%</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="overview-card">
          <div class="card-title">内容总量</div>
          <div class="card-number">8,956</div>
          <div class="card-footer">
            <span>今日新增: +23</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 中部图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="8">
        <el-card class="chart-card">
          <div slot="header">
            <span>用户活跃度分析</span>
          </div>
          <div class="chart" id="userActivityChart"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <div slot="header">
            <span>订单类型分布</span>
          </div>
          <div class="chart" id="orderTypeChart"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <div slot="header">
            <span>用户地域分布</span>
          </div>
          <div class="chart" id="userRegionChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部数据详情 -->
    <el-row :gutter="20" class="detail-row">
      <el-col :span="12">
        <el-card class="detail-card">
          <div slot="header">
            <span>热门景点TOP5</span>
          </div>
          <el-table :data="hotSpots" style="width: 100%" :show-header="false">
            <el-table-column prop="rank" width="50"></el-table-column>
            <el-table-column prop="name"></el-table-column>
            <el-table-column prop="count" width="100"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="detail-card">
          <div slot="header">
            <span>热门游记TOP5</span>
          </div>
          <el-table :data="hotArticles" style="width: 100%" :show-header="false">
            <el-table-column prop="rank" width="50"></el-table-column>
            <el-table-column prop="title"></el-table-column>
            <el-table-column prop="likes" width="100"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "Index",
  data() {
    return {
      // 热门景点数据
      hotSpots: [
        { rank: '1', name: '故宫博物院', count: '2,356' },
        { rank: '2', name: '长城', count: '2,157' },
        { rank: '3', name: '西湖', count: '1,958' },
        { rank: '4', name: '黄山', count: '1,856' },
        { rank: '5', name: '张家界', count: '1,756' }
      ],
      // 热门游记数据
      hotArticles: [
        { rank: '1', title: '三天两晚故宫深度游', likes: '1,235' },
        { rank: '2', title: '长城徒步一日游', likes: '1,156' },
        { rank: '3', title: '西湖春游攻略', likes: '1,089' },
        { rank: '4', title: '黄山日出攻略', likes: '956' },
        { rank: '5', title: '张家界三日游', likes: '889' }
      ]
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      // 用户活跃度图表
      const userActivityChart = echarts.init(document.getElementById('userActivityChart'))
      userActivityChart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: { type: 'value' },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      })

      // 订单类型分布图表
      const orderTypeChart = echarts.init(document.getElementById('orderTypeChart'))
      orderTypeChart.setOption({
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '门票' },
            { value: 735, name: '酒店' },
            { value: 580, name: '车票' },
            { value: 484, name: '团购' }
          ]
        }]
      })

      // 用户地域分布图表
      const userRegionChart = echarts.init(document.getElementById('userRegionChart'))
      userRegionChart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: ['北京', '上海', '广州', '深圳', '成都'] },
        yAxis: { type: 'value' },
        series: [{
          data: [20, 18, 15, 12, 10],
          type: 'bar'
        }]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  padding: 20px;

  .overview-row {
    margin-bottom: 20px;

    .overview-card {
      height: 120px;
      
      .card-title {
        font-size: 14px;
        color: #909399;
      }
      
      .card-number {
        font-size: 24px;
        font-weight: bold;
        margin: 10px 0;
      }
      
      .card-footer {
        font-size: 12px;
        color: #909399;
      }
    }
  }

  .chart-row {
    margin-bottom: 20px;

    .chart-card {
      .chart {
        height: 300px;
      }
    }
  }

  .detail-row {
    .detail-card {
      .el-table {
        font-size: 13px;
      }
    }
  }
}
</style>
